﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LiteDB Web Shell</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
    <style>
        body { background-color: #2D2D30; }
        h1, h1 a { text-align: center; color: #FF9D10; font-family: monospace; }
        .shell { background-color: #2A211C; padding: 20px; color: white; border: 1px solid #3E3E42; border-top-width: 4px; font-family: monospace; font-size: 14px; height: 450px; width: 800px; overflow-y: auto; overflow-x: auto; position: absolute; top: 50%; left: 50%; margin: -250px 0 0 -400px; }
        .prompt { position: relative; padding-left: 15px; }
        .prompt:before { position: absolute; top: 0px; left: 0px; content: '>'; color: white; }
        .cursor { position: absolute; }
        .textbox { width: 100%; border: 0px; background-color: transparent; color: white; outline: none; font-family: monospace; font-size: 14px; }
        pre { margin: 5px 0px;}
        .welcome { color: #F6F080; }
        .result { color: cyan; }
        .error { color: #FF7D60; }
        .shell::-webkit-scrollbar { width: 8px; height: 8px; }
        .shell::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #686868; }
    </style>
</head>
<body>

    <div class="github-fork-ribbon-wrapper right">
        <div class="github-fork-ribbon">
            <a href="https://github.com/mbdavid/litedb">Fork me on GitHub</a>
        </div>
    </div>

    <h1><a href="https://github.com/mbdavid/litedb">LiteDB Web Shell</a></h1>
    <div class="shell">
        <div class="welcome">
            Welcome to LiteDB Web Shell - Version 0.6<br /><br />
            Getting started with `help`<br /><br />
        </div>
        <div class="prompt">
            <input type="textbox" class="textbox" autofocus spellcheck="false" />
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>

        var db = localStorage.getItem('db');

        if (!db) {
            db = 'db_' + (new Date()).getTime();
            localStorage.setItem('db', db);
        }

        var hist = [];
        var idx = 0;

        $('.shell').on('click', function () { $('.textbox').focus(); });

        $('.textbox').on('keyup', function (e) {

            var $el = $(this);
            var $prompt = $el.parent();
            var text = $el.val().trim();

            if (e.keyCode == 13 && text.length > 0) {

                $prompt.before('<div class="prompt">' + text + '</div>');
                $el.val('')
                $prompt.hide();
                hist.push(text);
                idx = hist.length;

                $.post('api.ashx', { db: db, cmd: text }).done(function (result) {
                    var css = /^ERROR:\s/.test(result) ? 'error' : 'result';
                    $prompt.before('<pre class="' + css + '">' + $('<div/>').text(result).html() + '</pre>');
                    $prompt.show();
                    $el.focus();
                    setTimeout(function () {
                        var div = $('.shell').get(0);
                        div.scrollTop = div.scrollHeight;
                    }, 100);
                });
            }
            else if (e.keyCode == 38) {
                idx = Math.max(0, idx - 1);
                $el.val(hist[idx]);
            }
            else if (e.keyCode == 40) {
                idx = Math.min(hist.length - 1, idx + 1);
                $el.val(hist[idx]);
            }

        });

    </script>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-54329029-2', 'auto');
        ga('send', 'pageview');
    </script>
</body>
</html>
